<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch
        :formFields="searchList"
        @search="Search"
        @reset="Search"
      ></FormSearch>
    </div>
    <div class="footer">
      <a-table
        :columns="columns"
        :data-source="state.data"
        style="width: 100%"
        rowKey="special_id"
        :pagination="state.pagination"
        @change="pageChange"
        :loading="state.loading"
        :scroll="{ x: 1200 }"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'goods'">
            <div class="flex gap">
              <a-image
                :width="100"
                :src="record.goods.goods_img"
                class="image"
              />
              <div class="good-name">
                <a-tooltip>
                  <template #title>{{ record.goods.goods_name }}</template>
                  {{ record.goods.goods_name }}
                </a-tooltip>
              </div>
            </div>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-switch
              v-model:checked="record.status"
              checked-children="开启"
              un-checked-children="关闭"
              :checkedValue="1"
              :unCheckedValue="0"
              @change="changeSwitch(record)"
            />
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
    <script setup>
import { reactive } from "vue";
import { specialGoods, openSGoods } from "@/api/goods/goods";
import { message } from "ant-design-vue";

const searchList = reactive([
  {
    type: "switch", //类型
    label: "状态", //标签
    name: "status", //字段
    value: 1,
    checkedChildren: "上架",
    unCheckedChildren: "下架",
    checkedValue: 1,
    unCheckedValue: 2,
  },
]);
const columns = [
  { title: "id", dataIndex: "special_id", width: 100 },
  { title: "商品信息", dataIndex: "goods", width: 250 },
  { title: "最多点赞人数", dataIndex: "number", width: 200 },
  {
    title: "点赞返现金额",
    dataIndex: "price",
    width: 150,
    customRender(record) {
      return record.value ? "￥" + record.value : "-";
    },
  },
  { title: "下级购买人数", dataIndex: "buy_number", width: 150 },
  {
    title: "下级购买返现金额",
    dataIndex: "buy_price",
    width: 150,
    customRender(record) {
      return record.value ? "￥" + record.value : "-";
    },
  },
  {
    title: "排序",
    dataIndex: "sort",
    width: 100,
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 150,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
];
const state = reactive({
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    status: 1,
    page: 1,
    limit: 10,
  }, //搜索数据
});
//获取列表的数据
const getList = () => {
  state.loading = true;
  specialGoods({
    ...state.searchParams,
  }).then(function (res) {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  getList();
};

const changeSwitch = (record) => {
  openSGoods({
    id: record.special_id,
  }).then((res) => {
    if (res.code === 0) {
      message.success(res.msg);
      getList();
    }
  });
};

const Search = (values) => {
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  //搜索
  getList();
};
getList();
</script>
<style lang="scss" scoped>
@import "./index";
</style>
  